<template>
  <div class="address">
    <ul>
      <li v-for="(value,index) in addressList" :key="index" @click="selectAddress(value)">
        <div class="address_details">
          <div class="address_details_name">
            {{value.consignee}},{{value.phone}}
            <span class="default" v-if="value.is_default=='1'">默认</span>
          </div>
          <div class="address_details_city">
            {{value.province}}-{{value.city}}-{{value.area}}-{{value.add_detail}}
          </div>
        </div>
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/f6/wx/edit.png" class="address_edit" @click.stop="editAddress(value.id)"/>
      </li>

    </ul>
    <div class="address-btn">
      <div @click="toInputAddress">
        <img src="../../static/images/add.png" alt="" mode="scaleToFill">
        <div>添加地址</div>
      </div>
      <!--       <div @click="getWxAddress">-->
      <!--         <img src="../../../static/images/wx.png" alt="" mode="scaleToFill">-->
      <!--         <div>微信添加</div>-->
      <!--        </div>-->
    </div>
    <!-- navigator url="/pages/inputAddress/main"  -->
    <!-- <div></div> -->
  </div>
</template>

<script>


export default {
  data () {
    return {
      addressList:"",
      orderId:"",
      consignee:'',
      postcode:'',
      province:'',
      city:'',
      area:'',
      add_detail:'',
      phone:''
    }
  },
  methods:{
    async getAddressList(){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.getData('/ucenter/getShippingAddress',{user_token:userToken})
      this.addressList=res.data.data
      if(this.addressList.length==0){
        this.$store.dispatch('setAddress','')
      }
      console.log(this.addressList)
    },
    editAddress(id){
      uni.navigateTo({url:`/pages/inputAddress/inputAddress?id=${id}&&orderId=${this.orderId}`})
    },
    selectAddress(address){
      if(this.type!='address'){
        this.$store.dispatch('setAddress',address)
        wx.navigateBack({delta:1})
      }

    },
    toInputAddress(){
      uni.navigateTo({url:'/pages/inputAddress/inputAddress'})
    },
    getWxAddress(){//获取微信地址
      const _this=this
      wx.chooseAddress({
        success(res) {
          _this.consignee=res.userName
          _this.postcode=res.postalCode
          _this.province=res.provinceName
          _this.city=res.cityName
          _this.area=res.countyName
          _this.add_detail=res.detailInfo
          _this.phone=res.telNumber
          _this.saveAddress()
        }
      })
    },
    async saveAddress(){//保存微信的地址
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/ucenter/newShippingAddress',{
        user_token:userToken,
        consignee:this.consignee,
        phone:13724152320,
        province:this.province,
        city:this.city,
        area:this.area,
        add_detail:this.add_detail,
        postcode:this.postcode,
        is_default:1})
      if(res.data.level=='success'){
        this.getAddressList();//刷新数据
      }else{
        uni.showToast({title:res.data.message,icon:"none"})
      }

    }

  },
  onShow(){
    this.getAddressList()
    console.log(this.type)
  },
  onLoad(options){
    this.type=options.type   //这里的type如果是address   那么就代表他是我个人中心那里点击进来的，所以不能执行选择地址这个函数
    console.log(this.type)
    this.orderId=options.orderId
  }
}
</script>

<style scoped lang="scss" type="text/css">
  .address{
    width:100%;
  ul
  {
    width:100%;
  li{
    width:100%;
    height:70px;
    display:flex;
    background-color:#fff;
    justify-content:space_around;
    border-bottom:1px solid #eee;
  .address_select{
    width:20px;
    height:20px;
    margin:25px 20px;
  }
  .address_details{
    margin-left:10px;
    flex:1;
    overflow: hidden;
  .address_details_name{
    width:100%;
    line-height:30px;
  .default{
    color: #666666;
    font-size: 24rpx;
    padding:0 10rpx;
    border-radius: 6rpx;
    border: 1rpx solid #b4b4b4;
  }
  }
  .address_details_city{
    width:100%;
    line-height:40px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  }
  .address_edit{
    width:40px;
    height:40px;
    margin:15px 30px;
  }
  }
  }
  &-btn{
     width:90%;
     line-height:50px;

     text-align:center;
     position: absolute;
     bottom:20px;
     left:5%;
     color:#fff;
     display: flex;
     justify-content: space-around;
     align-items: center;
  &>div{
     display: flex;
     align-items: center;
     justify-content: center;
     background-color:red;
     border-radius:5px;
     width: 100%;
  img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  }
  &>div:last-child{
     background: #333333;
   }
  }
  }
</style>
